<template>
  <div>
    <el-menu
        :default-active="activeIndex"
        class="nav-menu"
        mode="horizontal"
        background-color="#ffffff"
        text-color="#42b983"
        active-text-color="#42b983"
        @select="handleSelect"
    >
      <el-menu-item index="0" class="logo" @click="sel4">MyPostman接口测试平台</el-menu-item>
      <div class="nav-items">
        <el-menu-item index="1" @click="sel1">工具</el-menu-item>
        <el-menu-item index="2" @click="sel2">在线文档</el-menu-item>
        <el-menu-item index="3" @click="sel3">个人中心</el-menu-item>
        <el-menu-item index="4" @click="sel5">插件</el-menu-item>
      </div>
    </el-menu>

    <div class="profile-container">
      <div class="profile-card">
        <!-- Left Section with Image -->
        <div class="image-section">
          <span class="pro-badge">PRO</span>
          <img
              :src="profileImage"
              alt="Profile Photo"
              class="profile-image"
          />
          <button class="floating-action-btn" @click="openDialog">
            <span class="plus-icon">+</span>
          </button>
        </div>

        <!-- Right Section with Info -->
        <div class="info-section">
          <div class="user-info">
            <h1 class="name">{{ userInfo.name }}</h1>
            <p class="username">{{ userInfo.username }}</p>
          </div>

          <div class="stats">
            <div class="stat-item">
              <span class="stat-value">{{ userStats.shots }}</span>
              <span class="stat-label">Shots</span>
            </div>
            <div class="stat-item">
              <span class="stat-value">{{ userStats.following }}</span>
              <span class="stat-label">Following</span>
            </div>
            <div class="stat-item">
              <span class="stat-value">{{ userStats.followers }}</span>
              <span class="stat-label">Followers</span>
            </div>
          </div>

          <button class="message-btn">
            SEND MESSAGE
          </button>
        </div>
      </div>
    </div>

    <!-- Edit Profile Dialog -->
    <el-dialog
        :visible.sync="dialogVisible"
        title="Edit Profile"
        @close="closeDialog"
    >
      <el-form :model="formData" label-width="100px">
        <el-form-item label="Name">
          <el-input v-model="formData.name" placeholder="Enter your name"></el-input>
        </el-form-item>

        <el-form-item label="Username">
          <el-input v-model="formData.username" placeholder="Enter your username"></el-input>
        </el-form-item>

        <el-form-item label="Profile Image URL">
          <el-input v-model="formData.profileImage" placeholder="Enter image URL"></el-input>
        </el-form-item>

        <el-form-item label="Shots">
          <el-input-number v-model="formData.shots" :min="0" label="Shots"></el-input-number>
        </el-form-item>

        <el-form-item label="Following">
          <el-input-number v-model="formData.following" :min="0" label="Following"></el-input-number>
        </el-form-item>

        <el-form-item label="Followers">
          <el-input-number v-model="formData.followers" :min="0" label="Followers"></el-input-number>
        </el-form-item>

        <span slot="footer" class="dialog-footer">
          <el-button @click="closeDialog">Cancel</el-button>
          <el-button type="primary" @click="saveChanges">Save</el-button>
        </span>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'PersonCenter',
  data() {
    return {
      dialogVisible: false,
      formData: {
        name: 'admin',
        username: '@dimablover',
        profileImage: 'https://pic.imgdb.cn/item/675e8ca1d0e0a243d4e41ff2.png?height=400&width=400',
        shots: 23,
        following: 314,
        followers: 487,
      },
      userInfo: {
        name: 'admin',
        username: '@dimablover',
      },
      userStats: {
        shots: 23,
        following: 314,
        followers: 487,
      },
      profileImage: 'https://pic.imgdb.cn/item/675e8ca1d0e0a243d4e41ff2.png?height=400&width=400'
    };
  },
  methods: {
    sel1() {
      this.$router.push('/home');
    },
    sel2() {
      this.$router.push('/doc');
    },
    sel3() {
      this.$router.push('/person');
    },
    sel4() {
      this.$router.push('/welcome');
    },
    sel5() {
      this.$router.push('/market');
    },
    openDialog() {
      // Populate the form with current data
      this.formData = { ...this.userInfo, ...this.userStats, profileImage: this.profileImage };
      this.dialogVisible = true;
    },
    closeDialog() {
      this.dialogVisible = false;
    },
    saveChanges() {
      // Update the user data
      this.userInfo.name = this.formData.name;
      this.userInfo.username = this.formData.username;
      this.profileImage = this.formData.profileImage;
      this.userStats.shots = this.formData.shots;
      this.userStats.following = this.formData.following;
      this.userStats.followers = this.formData.followers;

      // Close the dialog
      this.closeDialog();
    }
  }
};
</script>
<style scoped>
.profile-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background-color: #f5f5f5;
}

.profile-card {
  display: flex;
  max-width: 800px;
  min-height: 400px;
  background: white;
  border-radius: 20px;
  overflow: visible;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.image-section {
  position: relative;
  flex: 1;
  min-height: 100%;
}

.profile-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
}

.pro-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background-color: #1a1a2e;
  color: white;
  padding: 0.25rem 1rem;
  border-radius: 15px;
  font-size: 0.875rem;
  font-weight: 600;
}

.floating-action-btn {
  position: absolute;
  bottom: -1.5rem;
  right: -1.5rem;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: #ff4b6e;
  border: none;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(255, 75, 110, 0.3);
  transition: transform 0.2s;
}

.floating-action-btn:hover {
  transform: scale(1.1);
}

.plus-icon {
  font-size: 24px;
  line-height: 1;
}

.info-section {
  flex: 1;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.user-info {
  text-align: left;
}

.name {
  font-size: 1.5rem;
  font-weight: 600;
  color: #1a1a2e;
  margin: 0;
}

.username {
  color: #666;
  margin-top: 0.25rem;
}

.stats {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-value {
  font-size: 1.5rem;
  font-weight: 600;
  color: #1a1a2e;
}

.stat-label {
  color: #666;
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

.message-btn {
  background-color: #1a1a2e;
  color: white;
  border: none;
  padding: 1rem;
  border-radius: 25px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s;
}

.message-btn:hover {
  background-color: #2a2a3e;
}

@media (max-width: 640px) {
  .profile-card {
    flex-direction: column;
  }

  .floating-action-btn {
    right: 1rem;
    bottom: -1.5rem;
  }

  .info-section {
    padding-top: 2.5rem;
  }
}
.nav-menu {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.logo {
  font-size: 1.2rem;
  font-weight: bold;
  color: #42b983 !important;
}

.nav-items {
  display: flex;
}

</style>

